<!DOCTYPE html>
<html lang="en">
<STYle>
       #app{
      
                  width: 300px;
        }
</STYle>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/antd.min.css">
    <script src="js/vue.min.js"></script>
    <script src="js/antd.min.js"></script>
    <style>
       
    </style>
</head>

<body>
    <div id="a" style="text-align: center">
         <div id="app" style="margin: 0 auto; width: 20%;">
        <div v-if="isShow" class="header">
            <h1>登录</h1>
            <p>
                <a-input v-model="userName" placeholder="请输入账号"></a-input>
            </p>
            <p>
                <a-input v-model="passWord" type="password" placeholder="请输入密码"></a-input>
            </p>
            <p>
                <a-button type="primary" v-on:click="login()">登录</a-button>
                <a-button type="primary" v-on:click="changeUI()">注册</a-button>
            </p>
        </div>
        <div v-else class="header">
            <h1>注册</h1>
            <p>
                <a-input v-model="userName" type="userName"  placeholder="请输入账号"></a-input>
            </p>
            <p>
                <a-input v-model="passWord" type="password" placeholder="请输入密码"></a-input>
            </p>
            <p>
                <a-input v-model="passWordAgain" type="password" placeholder="请再次输入密码"></a-input>
            </p>
            <p>
                <a-button type="primary" v-on:click="insertInfo()">注册</a-button>
                <a-button type="primary" v-on:click="changeUI()">返回登录</a-button>
            </p>
        </div>
    </div>
    </div>
   
    <script>
        new Vue({
            el: "#app",
            data: {
                isShow: true,
                userName: "",
                passWord: "",

                list: [{
                    userName: "admin",
                    passWord: "123456",

                }],
                passWordAgain: ""
            },
            methods: {
                login: function () {
                    if (this.userName == "") {
                        this.$message.error("请输入账号");
                        return;
                    };
                    if (this.passWord == "") {
                        this.$message.error("请输入密码");
                        return;
                    }
                    var isf = true;
                    this.list.forEach(element => {
                        if (element.userName == this.userName && element.passWord == this.passWord) {
                            window.location = "index.html"
                        }
                    });
                    if (isf) {
                        this.$message.error("账号密码错误");
                    }
                },
                changeUI: function () {
                    this.isShow = this.isShow ? false : true;
                },
                insertInfo: function () {
                    this.list.push({
                        userName: this.userName,
                        passWord: this.passWord
                    });
                    this.$message.success("注册成功");
                }
            }
        });
    </script>
</body>

</html>